<script setup lang="ts">
import WechatPay from './WechatPay.vue'
import { useAdminPayStore } from '../store/adminPay'
import AliPay from './AliPay.vue'
import { storeToRefs } from 'pinia'

const store = useAdminPayStore()
const { saveConfig } = store
const { showType, loading } = storeToRefs(store)
</script>

<template>
  <t-row class="container">
    <t-card class="card" header-bordered title="支付设置" style="width: 100%">
      <template #actions>
        <t-button size="small" @click="saveConfig" :loading="loading">保存</t-button>
      </template>
      <t-space direction="vertical" style="width: 100%">
        <t-radio-group variant="default-filled" v-model="showType">
          <t-radio-button value="1">微信官方</t-radio-button>
          <t-radio-button value="2">支付宝官方</t-radio-button>
        </t-radio-group>
      </t-space>
      <t-row class="main">
        <WechatPay />
        <AliPay />
      </t-row>
    </t-card>
  </t-row>
</template>

<style scoped lang="less">
.t-row {
  margin: 20px 0;
  .main {
    border: var(--td-component-border) 1px solid;
    margin: 20px;
  }
}
</style>
